<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>动态点连线</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var c = document.getElementById("canvas");
      c.width = document.body.clientWidth;
      c.height = document.body.clientHeight;
      var ctx = c.getContext("2d");
      var r = 1;
      var pointFillStyle = "black";
      var pointCount = 100;
      var maxLength = 100;
      var speedX = 60;
      var speedY = 60;

      function drawLine(point1, point2) {
        drawPoint(point1);
        drawPoint(point2);
        // 计算距离
        var lengthMy = getLength(point1, point2);
        // 距离短的才画线
        if (lengthMy <= maxLength) {
          ctx.beginPath();
          ctx.moveTo(point1.x, point1.y);
          ctx.lineTo(point2.x, point2.y);
          var rateColor = (maxLength - lengthMy) / maxLength;
          var lineFillStyle = `rgba(0,0,0,${rateColor * 1.5})`;
          ctx.strokeStyle = lineFillStyle;
          ctx.stroke();
        }
      }
      function getLength(point1, point2) {
        return Math.sqrt(
          Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)
        );
      }
      function drawPoint(point) {
        ctx.moveTo(point.x, point.y);
        ctx.beginPath();
        ctx.arc(point.x, point.y, r, 0, 2 * Math.PI);
        ctx.fillStyle = pointFillStyle;
        ctx.fill();
      }
      var points = new Array(pointCount).fill(0).map((item) => {
        return {
          x: Math.floor(Math.random() * c.width),
          y: Math.floor(Math.random() * c.height),
          speedX: Math.random() * speedX - speedX / 2,
          speedY: Math.random() * speedY - speedY / 2,
        };
      });
      var start;
      function randomPoint(timestamp) {
        if (!start) start = timestamp;
        // 下一次绘制的实际发生时间与初始化的时间差
        diff = timestamp - start;
        console.log(diff)
        
        if(diff>4000){
          start = timestamp
        }
        points.forEach(point=>{
          if(!point.xover){
            point.xover=point.x
          }
          if(!point.yover){
            point.yover=point.y
          }
          
          point.x = point.xover+point.speedX*(diff/4000)
          point.y = point.yover+point.speedY*(diff/4000)
          if(diff>4000){
            point.xover=point.x
            point.yover=point.y
          }
          if(point.x>=c.width-r/2){
            point.x = c.width
            point.speedX = -point.speedX
          }
          if(point.x<=r/2){
            point.x = r/2
            point.speedX = -point.speedX
          }
          if(point.y>=c.height-r/2){
            point.y = c.height
            point.speedY = -point.speedY
          }
          if(point.y<=r/2){
            point.y = r/2
            point.speedY = -point.speedY
          }
        })
        requestAnimationFrame(randomPoint);
        drawPoints();
      }
      function drawPoints() {
        ctx.clearRect(0, 0, c.width, c.height);
        console.log(points[0]);
        for(var i=0;i<points.length;i++){
          for(var j=i;j<points.length;j++){
            if(i<j){
              drawLine(points[i], points[j]);
            }
          }
        }
        
        // setTimeout(function(){
        //   drawPoints(points)
        // },10)
      }
      requestAnimationFrame(randomPoint);
      window.onresize=function(){
        c.width = document.body.clientWidth;
        c.height = document.body.clientHeight;
      }
    </script>
  </body>
</html>
